<template>
       <n-menu :options="menuOptions" @update:value="handleUpdateValue" />
</template>
<script>
import { defineComponent, h ,getCurrentInstance} from "vue";
import { NMenu, NIcon, NModal, NCard, useModal, useMessage } from 'naive-ui'
import { BookOutline, WineOutline, PersonOutline } from "@vicons/ionicons5";
import JBMarker from "./jb/JBMarker.vue";
import Scenario from "./scenario/scenario.vue";
import jq from "jquery";
import { useStore } from "vuex";
import commonConstants from "@/common/commonConstants";
import InfluecneSource from "./scenario/InfluecneSource.vue";
export default defineComponent({
    components: {
        JBMarker,Scenario,InfluecneSource,
        NMenu, NModal, NCard,
        BookOutline, WineOutline, PersonOutline
    },
    setup() {

        const { proxy } = getCurrentInstance();
        //解析icon 的方法
        function renderIcon(icon) {
            return () => h(NIcon, null, { default: () => h(icon) })
        }

        const store = useStore()
        const msg = useMessage()
        //菜单项
        const menuOptions = [{
            label: "想定管理",
            key: "scenarioManager",
            icon: renderIcon(PersonOutline),
            options:{
                style:{
                    width:"1000px"
                }
            }
        },{
            label: "军标库",
            key: "JBMarker",
            icon: renderIcon(BookOutline),
            options:{
                unstableShowMask:false,
                draggable:true,
                style:{
                    width: "360px",
                    height:"700px",
                    position: "fixed",
                    left:"50px",
                    bottom:"100px",
                    "pointer-events":"auto"
                },
                "on-after-enter":()=>{
                    jq(".n-modal-body-wrapper").css("pointer-events","none")
                }
            }
        },{
            label: "影响元素",
            key: "InfluenceSource",
            icon: renderIcon(PersonOutline),
            options:{
                style:{
                    width:"1200px"
                }
            }
        }, {
            label: "推演设定",
            key: "Scenario",
            icon: renderIcon(BookOutline),
            children: [
                {
                    label: "兵力管理",
                    key: "troopManager",
                    icon: renderIcon(BookOutline),
                    options:{}
                }, {
                    label: "航迹管理",
                    key: "trackManager",
                    icon: renderIcon(BookOutline),
                    options:{}
                }, {
                    label: "效果管理",
                    key: "EffectManager",
                    icon: renderIcon(WineOutline),
                    options:{}
                }, {
                    label: "预演开始",
                    key: "ActionStart",
                    icon: renderIcon(BookOutline),
                    options:{}
                }
            ]
        }];

        const modal = useModal();

        //所有的弹框
        const modals = new Map();
        modals.set("scenarioManager",Scenario);    
        modals.set("JBMarker",JBMarker);  
        modals.set("InfluenceSource",InfluecneSource);

        //处理菜单点击事件
        const handleUpdateValue = (key, menuItem) => {

            if(store.state.isEditScenario){
                if(key == "scenarioManager"){
                    msg.info("想定编辑中......")
                    return
                }
            }else{
                if(key != "scenarioManager"){
                    msg.info("情先进入想定编辑.......")
                    return
                }
                if(key == "JBMarker"){
                    let markerable = store.state.scenarioDeduce.getConfigValue(commonConstants.configurationKey.markerable);
                    if(!markerable){
                        msg.info("没有开启标绘！");
                        return;
                    }
                }
            }

            const modelOptions ={
                title: menuItem.label,
                preset: 'card',
                maskClosable:false,
                style: {
                    width: '400px'
                },
                content: ()=>h(modals.get(key),{modal:m})
            }

            //额外的配置，需要加入，可以使用 for in
            if (menuItem.hasOwnProperty('options')) {
                let options = menuItem["options"];
               
                for (const k in options) {
                    if (Object.prototype.hasOwnProperty.call(options, k)) {
                        modelOptions[k] = options[k];
                        
                    }
        
                }
                    
            }

            //创建弹窗，并将弹窗对象传入子模块
            const m = modal.create(modelOptions)
        }

        return {
            menuOptions,
            handleUpdateValue
        }
    }
})

</script>